<template>
	<div>
		<hello-world :count="getCount"></hello-world>
		<world-hello></world-hello>
		<div>message:{{ messge }}</div>
		<button @click="comm ='first-form'">first-form</button>
		<button @click="comm ='second-form'">second-form</button>
		<button @click="comm ='table-form'">table-form</button>
		<div>
			<button
				@click="persons.push({
					name: 'rengguang',
					hometown: 'xi an\nwuhan',
					gendar: [1],
					age: '',
					howtall: 120,
					address: 'xiuyanlu',
					birthday: '',
					alias: 'v',
          hobby: [],
					get percentage() {
						var n = 0;
						this.name && (n++);
						this.hometown && (n++);
						this.age && (n++);
						this.howtall && (n++);
						this.address && (n++);
						this.birthday && (n++);
						this.gendar.length > 0 && (n++);
						return n*100/7;
					}
				})">添加1</button>
			<button @click="addPreson">添加2</button>
			<button @click="persons.pop()">删除</button>
			<button @click="persons=[{
				name: '六号',
				hometown: '北京市中话剧',
				gendar: [1],
				age: '',
				howtall: 120,
				address: '北京市朝阳区桂园路',
				birthday: '',
				alias: 'v',
			}]">转位</button>
		</div>
		<keep-alive>
			<component :is="comm" :forms.sync="persons" v-model="messge"></component>
		</keep-alive>
		<div>
			<div v-for="item in items">{{ item }}</div>
		</div>
		<el-table :data="persons">
			<el-table-column label="姓名" prop="name"></el-table-column>
			<el-table-column label="家乡" prop="hometown"></el-table-column>
			<el-table-column label="年龄" prop="age"></el-table-column>
			<el-table-column label="身高" prop="howtall"></el-table-column>
			<el-table-column label="家庭住址" prop="address">
				<template slot-scope="scope">
					<div v-for="item in scope.row.address.split(',')">{{item}}</div>
				</template>
			</el-table-column>
			<el-table-column label="生日" prop="birthday"></el-table-column>
			<el-table-column label="起床事件" prop="getuptime">
				<template slot-scope="scope">
					<span v-for="(item, index) in scope.row.getuptime">{{item}}{{ index == 0 ? '-' : '' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="性别" prop="gendar"></el-table-column>
			<el-table-column label="完整度" prop="percentage" >
				<template slot-scope="scope">
					<el-progress :percentage="scope.row.percentage" status="success" style="width: 100px;"></el-progress>
				</template>
			</el-table-column>
		</el-table>
		<div>
			<calender
				@test1="test"
				:markArr="[
					{
						color:'#76ff19',
						name:'测试一',
						days:['2021-4-8','2021-4-11','2021-4-14','2021-4-22'],
						clickEvent:'test1'
					}
				]"
			></calender>
		</div>
		<div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import SockJS from  'sockjs-client'
import Stomp from 'stompjs'

export default {
	computed: {
		...mapGetters([
			'getCount'
		])
	},
	data() {
		return {
			items: [],
			persons: [],
			messge: '',
			socket: null,
			stompClient: null,
			comm: 'first-form'
		}
	},
	created() {
	  this.connection();
	},
	components: {
		'hello-world': ()=>import('../components/HelloWorld.vue'),
		'world-hello': ()=>import('../components/WorldHello.vue'),
		'first-form': ()=>import('../components/FirstForm.vue'),
		'second-form': ()=>import('../components/SecondForm.vue'),
		'table-form': ()=>import('../components/TableForm.vue'),
		'calender': ()=>import('../components/Calender.vue')
	},
	methods: {
		connection() {
			// 建立连接对象
			this.socket = new SockJS('/endpointBillAlert');
			// 获取STOMP子协议的客户端对象
			this.stompClient = Stomp.over(this.socket);
			// 向服务器发起websocket连接
			this.stompClient.connect({},(frame) => {
				console.log('fdsfsdfsd',frame)
				this.stompClient.subscribe('/queue/news', (data) => {
					console.log("订单消息啦~" + data)
					this.items.push(data)
				});
			}, (err) => {
			  // 连接发生错误时的处理函数
			  console.error("连接出错了")
			  console.log(err);
			});
		},
		test(o) {
			console.log(o)
			alert(o.day + '-' + o.month + '-' + o.year)
		},
		addPreson() {
			this.persons.push(new Proxy({
				name: 'rengguang',
				hometown: 'xi an\nwuhan',
				gendar: [1],
				age: '',
				howtall: 120,
				address: 'xiuyanlu',
				birthday: '',
				alias: 'v',
        hobby: [],
				percentage: 0
			},{
				set: function(obj, prop, value) {
					if (prop === 'howtall') {
						if (isNaN(value)) {
							throw new TypeError('The age is not an integer');
						}
						if (value > 200) {
							throw new RangeError('The age seems invalid');
						}
					}
					obj[prop] = value;
					if(prop != 'percentage') {
						var n = 0;
						for (var i in obj) {
							i == 'gendar' ? obj[i].length > 0 && (n++)
							: !!obj[i] && i != 'percentage' && i != 'alias' && (n++);
							
						}
						obj.percentage = n*100/7;
					}
				}
			}));
		}
	},
	watch: {
		persons: {
			handler(newName, oldName) {
				/*this.persons.forEach(item => {
					if(!!item.age) {
						item.age = parseFloat(item.age)
					} else {
						item.age = null
					}
				})
				console.log('new value', this.persons)*/
			},
			immediate: true,
			deep: true
		}
	}
}
</script>

<style>
</style>
